<template>
  <section class="real-app">
    <input
      type="text"
      class="add-input"
      autofocus="autofocus"
      placeholder="接下来做点什么"
      @keyup.enter="addTodo"
    />
    <Item 
      v-for="todo in filteredTodos" 
      :key="todo.id" 
      :todo="todo"
      @del="deleteTodo"
    />
    <Tabs 
      :filter="filter" 
      :todos="todos"
      @toggle="toggleFilter"
      @clearAllCompleted="clearAllCompleted"
    />
  </section>
</template>
<script>
import Item from './item.vue'
import Tabs from './tabs.vue'
let id = 0
export default {
  components: {
    Item,
    Tabs
  },
  data() {
    return {
      todos: [],
      filter: 'all'
    }
  },
  computed: {
    filteredTodos() {
      return this.todos.filter(todo => {
        if (this.filter === 'all') {
          return true
        } else if (this.filter === 'active') {
           return !todo.completed
        } else {
          return todo.completed
        }
      })
    }
  },
  methods: {
    addTodo(e) {
      this.todos.unshift({
        id: id++,
        content: e.target.value.trim(),
        completed: false
      })
      e.target.value = ''
    },
    // 监听子组件传来的删除操作
    deleteTodo(id) {
      this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
    },
    // 过滤todos状态
    toggleFilter(state) {
      this.filter = state
    },
    // 删除已完成
    clearAllCompleted() {
      this.todos = this.todos.filter(todo => !todo.completed)
    }
  }
  
}
</script>
<style lang="stylus" scoped>
.real-app{
    width 600px
    margin :0px  auto
    box-shadow :0px 0px 5px #666
}
.add-input{
    positon:relative;
    margin 0px
    width 100%
    font-size 24px
    font-family  inherit 
    font-weight:inherit
    line-height 1.4rem
    border 0;
    outline none 
    color inherit
    padding 6px
    border 1px solid #999
    box-shadow: inset 0 -1px 5px 0px rgba(0,0,0,0)
    box-sizing border-box
    font-smoothing:antialiased;
    padding 16px 16px 16px 60px
    border none  
}
</style>
